<template>
	<view class="container">
		<view class="tui-searchbox">
			<view class="tui-search-input">
				<tui-icon name="search" color="#333" :size="22"></tui-icon>
				<input confirm-type="search" placeholder="请输入搜索内容" :focus="true" auto-focus placeholder-class="tui-input-plholder"
				 class="tui-input" v-model.trim="key"/>
				 <!-- #ifdef APP-PLUS || MP -->
					<icon type="clear" size='13' color='#bcbcbc' @tap="clean_key"></icon>
				 <!-- #endif -->
			</view>
			<view class="tui-cancle" @tap="back">搜索</view>
		</view>
	
		<view class="tui-search-history" v-if="search_arr.length>0">
			<view class="tui-history-header">
				<view class="tui-search-title">搜索历史</view>
				<tui-icon name="delete" :size="14" color='#333' class="tui-icon-delete" @tap="delete_search"></tui-icon>
			</view>
			<view class="tui-history-content">
				<block v-for="(item,index) in search_arr" :key="index">
					<view @tap="ar_search" :data-index="index" style="display: inline-block;">
						<tui-tag type="gray" shape="circle">{{item}}</tui-tag>
					</view>
					
				</block>
			</view>
		</view>
		<view class="tui-search-hot">
			<view class="tui-hot-header">
				<view class="tui-search-title">大家正在搜</view>
			</view>
			<view class="tui-hot-content">
				<block v-for="(item,index) in top_search_list" :key="index">
					<view @tap="av_search" :data-name="item.name" style="display: inline-block;">
						<tui-tag type="gray"  shape="circle">{{item.name}}</tui-tag>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import Search from './search-model.js'   
	var search = new Search();  
	export default {
		components: {
			tuiIcon,
			tuiTag
		},
		data() {
			return {
				//热搜列表
				top_search_list:[],
				//搜索内容
				key:'',
				search_arr: []
			}
		},
		onLoad() {
			var that = this;
			that.top_search();
			search.get_storage('search_arr',(res)=>{
				if(res != ''){
					that.search_arr = JSON.parse(res);
				}
				
			});
		},
		methods: {
			//热搜列表
			top_search(){
				var that = this;
				search.top_search_list((res)=>{
					if(res.code == 8888){
						that.top_search_list = res.data;
					}
				});
			},
			clean_key(){
				var that = this;
				that.key = '';
			},
			//删除搜索
			delete_search(){
				var that = this;
				search.show_modal({content:'确定要删除搜索历史吗？'},(res)=>{
					if (res.confirm) {
						search.remove_storage('search_arr');
						that.search_arr = [];
					}
				})
			},
			//点击搜索
			back(){
				var that = this;
				if(that.key != ''){
					 if(that.search_arr.length>0){
						that.search_arr.unshift(that.key);
					 }else{
						that.search_arr = [that.key];
					 }
					 that.search_arr = search.unique_arr(that.search_arr).slice(0,10);
					 search.set_storage('search_arr',JSON.stringify(that.search_arr));
					 search.navigate_to('../product_list/product_list?name='+that.key);
				};
			},
			ar_search(e){
				var that = this;
				search.navigate_to('../product_list/product_list?name='+that.search_arr[search.get_data_set(e,'index')]);
			},
			av_search(e){
				search.navigate_to('../product_list/product_list?name='+search.get_data_set(e,'name'));
			}
		}
	}
</script>

<style>
	@import url("search.css");
</style>
